import React from 'react'
import { Card, Row, Col, Form, Button, Table, Switch, Input, Select, Space,Breadcrumb} from 'antd';
import {Link} from 'react-router-dom'
import '../../assets/style/huodonglist.css'
import Option from "./addhuodong";

const columns = [
  {
    title: '活动ID',
    dataIndex: 'id',
    width: 100,
  },
  {
    title: '活动链接',
    dataIndex: 'link',
    width: 150,
  },
  {
    title: '活动名称',
    dataIndex: 'name',
    width: 150,
  },
  {
    title: '活动状态',
    dataIndex: '',
    width: 150,
    render:()=><Switch checkedChildren="进行中" unCheckedChildren="未开始" defaultChecked />
  },
  {
    title: '优惠券名称',
    dataIndex: 'yname',
    width: 150,
  },
  {
    title: '开始时间',
    dataIndex: 'btime',
    width: 150,
  },
  {
    title: '结束时间',
    dataIndex: 'etime',
    width: 150,
  },
  {
    title: '创建时间',
    dataIndex: 'ctime',
    width: 150,
  },
  {
    title: '创建人',
    dataIndex: 'cperson',
    width: 150,
  },
  {
    title: '操作',
    dataIndex: 'Action',
    width: 150,
    render: () =>(
        <Space size="middle">
          <Button type="primary">编辑</Button>
          <Button danger>删除</Button>
        </Space>
    )
  }
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    id: `${i}`,
    link: `活动链接${i}`,
    name:`活动名称${i}`,
    price: `${i}元`,
    yname:`优惠券${i}`,
    btime:`2020-10-11`,
    etime:`2020-10-11`,
    ctime:`2020-10-11`,
    cperson:`jason`,
  });
}

class youhuilist extends React.Component {
  render() {
    return(
      <div>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>活动管理</Breadcrumb.Item>
        </Breadcrumb>
          <Card title='活动列表'>
            <Card>
              <Form>
                {/*第一行*/}
                <Row span={24}>
                  <Col span={8}>
                    <Form.Item label="活动ID" colon={true}>
                      <Input placeholder="请填写活动ID" style={{ width: 240 }}/>
                    </Form.Item>
                  </Col>
                  <Col span={8}>
                    <Form.Item label="活动名称" colon={true}>
                      <Input placeholder="请填写活动名称" style={{ width: 240 }}/>
                    </Form.Item>
                  </Col>
                  <Col span={8}>
                    <Button type="primary" className={'btnbtn'}>查询</Button>
                    <Button type="primary" className={'btnbtn'}>重置</Button>
                  </Col>
                </Row>
                {/*第二行*/}
                <Row span={24}>
                  <Col span={8}>
                    <Form.Item label="活动状态" colon={true}>
                      <Select defaultValue="进行中" style={{ width: 240 }}>
                        <Option value="1">进行中</Option>
                        <Option value="0">未开始</Option>
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col span={8}>
                    <Form.Item label="创建人" colon={true}>
                      <Input placeholder="请填写活动创建人" style={{ width: 240 }}/>
                    </Form.Item>
                  </Col>
                  <Col span={8}>
                    <Link to='addhuodong'>
                      <Button type="primary" className={'btnbtn'}>添加活动</Button>
                    </Link>
                  </Col>
                </Row>
              </Form>
            </Card>
            <Row>
              <Table columns={columns} dataSource={data} pagination={{ pageSize: 5 }} scroll={{ y: 300 }} />
            </Row>
          </Card>
        </div>
    )
  }
}

export {youhuilist as default}